<!-- 首页 -->
<template>
  <!-- <div>
    <el-button @click="exportToExcel">导出 Excel</el-button>
  </div> -->
   <div>
      <div class="card">
        <el-row :gutter="1"> 
          <el-col :span="6">
              <el-card shadow="hover">
                <div class="headText">小区入住率</div>
                <div class="detail">住宅<span>{{ dataSet.residenceCount }}</span>套，商铺<span>{{ dataSet.shopCount }}</span>套</div>
                <el-progress :percentage="dataSet.propertyCount" :color="'#a6bcf8'" :stroke-width="10"></el-progress>
                <div class="count">
                  总计<span>住宅{{ dataSet.residenceCount+dataSet.unResidenceCount }}套，商户{{ dataSet.shopCount+dataSet.unShopCount }}套</span>
                </div>
            </el-card>
          </el-col>

          <el-col :span="6">
              <el-card shadow="hover">
                <div class="headText">车位使用率</div>
                <div class="detail">车位<span>{{ dataSet.spacesCount }}</span>车库<span>{{ dataSet.garageCount }}</span>个</div>
                <el-progress :percentage="dataSet.vehicleCount" :color="'#c6a3f0'" :stroke-width="10"></el-progress>
                <div class="count">
                  总计<span>车位{{ dataSet.spacesCount+dataSet.unSpacesCount  }}个，车库{{ dataSet.garageCount+dataSet.unGarageCount  }}个</span>
                </div>
            </el-card>
          </el-col>

          <el-col :span="6">
              <el-card shadow="hover">
                <div class="headText">小区仓库使用率</div>
                <div class="detail">已使用<span>{{ dataSet.warehouseCount }}</span>个</div>
                <el-progress :percentage="dataSet.warehouse" :color="'#facf87'" :stroke-width="10"></el-progress>
                <div class="count">
                  总计<span>{{ dataSet.warehouseCount + dataSet.warehouseCount }}个</span>
                </div>
            </el-card>
          </el-col>

          <el-col :span="6">
              <el-card shadow="hover">
                <div class="headText">房产利用率</div>
                <div class="detail">已关联<span>{{ dataSet.relevancyCount }}</span>房产</div>
                <el-progress :percentage="dataSet.rate" :color="'#eba5bf'" :stroke-width="10"></el-progress>
                <div class="count">
                  总计<span>{{ dataSet.total }}房产</span>
                </div>
            </el-card>
          </el-col>
        </el-row>
      
      </div>

      <div class="info">
        <div>
          <img src="../assets/用户.png" alt="" style="width: 50px">
          已绑定<span>{{ dataSet.ownerCount }}</span>位业主
        </div>
        <div>
          <img src="../assets/车辆.png" alt="" style="width: 50px">
          已绑定<span>{{ dataSet.carCount }}</span>位车辆
        </div>
        <div>
          <img src="../assets/宠物.png" alt="" style="width: 50px">
          已绑定<span>{{ dataSet.petCount }}</span>只宠物
        </div>
      </div>

    <el-row :gutter="20">
      <el-col :span="16">
        <div class="otherData">
        <div class="otherData-head">
          <img src="../assets/访客数.png" alt="" style="width: 50px">
          七日内访客统计
        </div>
        <div class="chart-box">
          <div ref="chart2" style="width: 100%; height: 300px;"></div>
        </div>
      </div>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
                <span>系统信息</span>
          </div>
          <div class="item-box">
                <span>服务器计算机名</span>
                <span class="data">{{ systemInfo.name }}</span>
          </div>
          <div class="item-box">
                <span>服务器IP地址</span>
                <span class="data">{{ systemInfo.ip }}</span>
          </div>
          <div class="item-box">
                <span>端口号</span>
                <span class="data">{{ systemInfo.port }}</span>
          </div>
          <div class="item-box">
                <span>当前操作系统</span>
                <span class="data">{{ systemInfo.osName }}</span>
          </div>
          <div class="item-box">
                <span>所在文件夹</span>
                <span class="data">{{ systemInfo.projectFolder }}</span>
          </div>
          <div class="item-box">
                <span>系统文件夹</span>
                <span class="data">{{ systemInfo.systemFolder }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

      <div class="charts">
        <div class="chart-head">
          <img src="../assets/统计报表.png" alt="" style="width: 50px">
          七日内服务统计
        </div>
        <div class="chart-box">
          <div id="line1" style="width: 100%;"></div>
        </div>
      </div>

    
  </div> 
</template>

<script>
import * as echarts from 'echarts/core';
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
  LineChart,
  UniversalTransition
]);

export default {
    name:'home',
    data(){
      return{
        charts1:null,
        charts2:null,
        dataSet:{},
        moveRequest:[],
        dateDay:[],
        feedback:[],
        renovation:[],
        repair:[],
        visitor:[],
        systemInfo:{
          name:'',
          ip:'',
          port:'',
          osName:'',
          projectFolder:'',
          systemFolder:''
        },
      }
    },
    created(){
      this.initAuthority();      
    },
    mounted(){
      this.initAuthority();      
     },
     methods:{
      initAuthority(){
        const admin = JSON.parse(localStorage.getItem("admin"))
        if(admin == null){
          this.$message({
                message: "登录以过期",
                type: 'error'
            })
            window.location.href = "/#/login"; 
          return
        }

        this.$request.get("/role/authority",{
          params:{
            id: JSON.parse(localStorage.getItem("admin")).id,
            index: 0
          }
        })
        .then(res =>{
          this.Authority = res.data
          if(res.data == '1'){
            this.initTime()
            // this.initCharts1();
            this.initCharts2();
            this.initPropertyDataSet();
            this.initMoveRequest();
            this.initfeedback();
            this.initrenovation();
            this.initrepair();
            this.initVisitor();
            this.initSystem();
          }else{
            this.$message.error("你没有权限访问此功能")
          }
        })
        .catch(err =>{
          console.log(err)
        })

      },
      initCharts1(){
        this.charts1 = echarts.init(document.getElementById("line1"));
        const option1 = {
          legend: {},
          tooltip: {},
          dataset: {
            source: [
              ['product', '投诉建议', '装修请求', '挪车请求','维修请求'],
              [this.dateDay[0],this.feedback[0],this.renovation[0], this.moveRequest[0],this.repair[0]],
              [this.dateDay[1],this.feedback[1],this.renovation[1], this.moveRequest[1],this.repair[1]],
              [this.dateDay[2],this.feedback[2],this.renovation[2], this.moveRequest[2],this.repair[2]],
              [this.dateDay[3],this.feedback[3],this.renovation[3], this.moveRequest[3],this.repair[3]],
              [this.dateDay[4],this.feedback[4],this.renovation[4], this.moveRequest[4],this.repair[4]],
              [this.dateDay[5],this.feedback[5],this.renovation[5], this.moveRequest[5],this.repair[5]],
              [this.dateDay[6],this.feedback[6],this.renovation[6], this.moveRequest[6],this.repair[6]],
            ]
          },
          xAxis: { type: 'category' },
          yAxis: {},
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' },{type:'bar'}]
              }
        this.charts1.setOption(option1);
      },
      
      initCharts2(){
        this.charts2 = echarts.init(this.$refs.chart2);
        const option2 = {
          xAxis: {
          type: 'category',
          data: [this.dateDay[0], this.dateDay[1], this.dateDay[2], this.dateDay[3], this.dateDay[4], this.dateDay[5], this.dateDay[6]]
         },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [this.visitor[0], this.visitor[1], this.visitor[2], this.visitor[3], this.visitor[4], this.visitor[5], this.visitor[6]],
              type: 'line'
            }
          ]
        };
        this.charts2.setOption(option2);
      },
      initPropertyDataSet(){
        this.$request.get("/property/homeData")
        .then(res=>{
          console.log(res.data)
          this.dataSet = res.data
        })
        .catch(err=>{})
      },
      initMoveRequest(){
      this.$request.get("/admin/moveRequest-by-day")
      .then(res => {
        this.moveRequest = res
        this.initCharts1()
      })
      .catch(err => {})
     },

     initfeedback(){
      this.$request.get("/admin/feedback-by-day")
      .then(res => {
        this.feedback = res
        this.initCharts1()
        // console.log('feedback',res)
      })
      .catch(err => {})
     },

     initrenovation(){
      this.$request.get("/admin/renovation-by-day")
      .then(res => {
        this.renovation = res
        this.initCharts1()
      })
      .catch(err => {})
     },

     initrepair(){
      this.$request.get("/admin/repair-by-day")
      .then(res => {
        this.repair = res
        this.initCharts1()
      })
      .catch(err => {})
     },

     initTime(){
        let arr = []        
        for(let i = 0;i<7;i++){
          var time=(new Date).getTime()-(24*60*60*1000)*i;
          var yesterday=new Date(time);
          var month=yesterday.getMonth();
          var day=yesterday.getDate();
          yesterday=yesterday.getFullYear() + "-" + (yesterday.getMonth()> 9 ? (yesterday.getMonth() + 1) : "0" + (yesterday.getMonth() + 1)) + "-" +(yesterday.getDate()> 9 ? (yesterday.getDate()) : "0" + (yesterday.getDate()));
          arr.push(yesterday)
        }
        this.dateDay = arr
     },

     initVisitor(){
        this.$request.get("/visitor/visitor-by-day")
        .then(res => {
          this.visitor = res
          this.initCharts2()
        })
        .catch(err => {})
     },
     initSystem(){
      this.$request.get("/admin/server-info")
        .then(res=>{
          this.systemInfo = res
          // console.log("sss",res)
        })
        .catch(err=>{})
     }
    }
     
     
}
</script>

<style>
  body{
    background-color: #f0f2f4;
  }
 .headText{
    color: #747171;
    font-size: 12px;
    margin-bottom: 10px;
 }
 .detail{
  margin-bottom: 10px;
 }
 .detail span{
    font-size: 20px;
    margin: 0 5px;
 }
 .count{
  margin-top: 10px;
  border-top: 1px solid #cbc4c4;
  padding-top: 10px;
  font-size: 10px;
 }
 .count span{
    float: right;
 }
 .info{
  margin-top: 20px;
  display: flex;
  background-color: #fff;
 }
 .info div{
  width: 33%;
 }
 .charts{
    background-color: #fff;
    margin: 20px 0 0 0;
 }
 #line1{
  width: 1200px;
  height: 400px;
 }
 .otherData{
  background-color: #fff;
  margin: 20px 0 0 0;
 }
 .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .item-box{
    border-bottom: 1px solid #f8f8f8;
    padding: 6px;
  }
  .data{
    float: right;
  }
</style>